<template>
	<view class="container">
		<view class="index">
			<!-- 顶部logo -->
			<view class="index_header">
				<view class="iconfont search" @click="goSearch">&#xe67b;</view>
				<image class="logo" src="https://upyun.dinghuale.com/uploads/images/logo.png" mode="widthFix"></image>
			</view>
			<!-- 轮播图 -->
			<swiper class="index_banner" :autoplay="true" :indicator-dots="true" indicator-active-color="#fff"
				interval="3000" :circular="true">
				<swiper-item v-for="(item,i) in bannerList" :key="i">
					<image :src="item.s_photos[0].path" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
			<!-- 导航区域 -->
			<view class="index_ensure">
				<view class="ensure_item" v-for="(item,i) in ensureList" :key="i">
					<view class="iconfont" style="font-size: 20px;">&#xe667;</view>
					<view class="text">{{item}}</view>
				</view>
			</view>
			<!-- 图标分类 -->
			<view class="index_nav">
				<navigator class="nav_item" v-for="(item,index) in navList" :key="index" open-type="navigate"
					:url="`/classify/classify?id=${item.sort}&title=${item.hyperlink}`">
					<image class="img" :src="item.s_photos[0].path" mode="widthFix"></image>
					<view class="title">{{item.hyperlink}}</view>
				</navigator>
			</view>
			<!-- 一秒选花 -->
			<view class="index_imgNav">
				<view class="title">一秒选花</view>
				<view class="imgNav imgNav1">
					<navigator class="imgNav_item1" v-for="(item,index) in imgNavList[0]" :key="index"
						open-type="navigate" :url="`/classify/classify?id=${item.sort}&title=${item.hyperlink}`">
						<view class="text" v-if="index === 0" style="background-color: rgb(255, 175, 178);">
							{{item.hyperlink}}
						</view>
						<view class="text" v-if="index === 2" style="background-color: rgb(241,191,147);">
							{{item.hyperlink}}
						</view>
						<view class="text" v-if="index === 1">{{item.hyperlink}}</view>
						<image class="img" :src="item.s_photos[0].path" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="imgNav imgNav2">
					<navigator class="imgNav_item2" v-for="(item,index) in imgNavList[1]" :key="index"
						open-type="navigate" :url="`/classify/classify?id=${item.sort}&title=${item.hyperlink}`">
						<view class="text">{{item.hyperlink}}</view>
						<image class="img" :src="item.s_photos[0].path" mode="widthFix"></image>
					</navigator>
				</view>
			</view>
			<!-- 分类商品模块盒子 -->
			<view class="index_module">
				<view class="module_item" v-for="(item,index) in moduleList" :key="index">
					<view class="title">
						<view>{{item.title}}</view>
					</view>
					<view class="line"></view>
					<view class="list">
						<navigator class="list_item" v-for="(pro,i) in item.proList" :key="i" open-type="navigate"
							:url="`/detail/detail?id=${pro.id}`">
							<image class="img" :src="pro.s_goods_photos[1].path" mode="widthFix"></image>
							<view class="name">{{pro.name}}</view>
							<view class="info">
								<view class="price">￥{{pro.sale_price}}</view>
								<view class="sale">销量{{pro.sold_num}}笔</view>
							</view>
						</navigator>
					</view>
					<navigator class="seeMore" open-type="navigate"
						:url="`/classify/classify?id=${item.id}&title=${item.title}`">查看更多</navigator>
				</view>
			</view>
			<!-- 底部 -->
			<view class="index_footer">
				<text style="line-height:20px;">Copyright©2020 成都勿忘我科技有限公司</text>
				<text style="line-height:20px;">蜀ICP备20016463号-2</text>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				bannerList: [],
				ensureList: ['品牌鲜花网', '实拍秀', '1小时送达', '50w+好评'],
				navList: [],
				imgNavList: [],
				moduleList: [{
						id: 2602,
						title: '爱情鲜花',
						proList: []
					},
					{
						id: 2604,
						title: '友情鲜花',
						proList: []
					},
					{
						id: 2620,
						title: '鲜花礼盒',
						proList: []
					},
					{
						id: 2621,
						title: '蛋糕',
						proList: []
					},
					{
						id: 2622,
						title: '开业花篮',
						proList: []
					},
					{
						id: 2623,
						title: '绿植',
						proList: []
					}
				]
			}
		},
		computed: {
			...mapState('tabBar', ['value'])
		},
		onLoad() {
			this.getBanner()
			this.getPro()

			// #ifdef MP-WEIXIN
			console.log('ddd');
			// #endif 
		},
		onShow() {
			this.changeValue(0)
		},
		methods: {
			...mapMutations('tabBar', ['changeValue']),
			getBanner() {
				uni.$http.get('/api/carousel', {
					project_id: 319
				}).then(res => {
					this.bannerList = res.data.result.filter(ele => ele.site_id === 408)
					this.navList = res.data.result.filter(ele => ele.site_id === 409)
					this.imgNavList.push(res.data.result.filter(ele => ele.site_id === 410))
					this.imgNavList.push(res.data.result.filter(ele => ele.site_id === 411))
				})
			},
			getPro() {
				this.moduleList.forEach(ele => {
					uni.$http.get('/api/goods', {
						project_id: 295,
						limit: 4,
						classify_id: ele.id
					}).then(res => {
						ele.proList = res.data.result.rows
					})
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/search/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100vw;
		display: flex;
		flex-direction: column;
		padding-bottom: 60px;

		.index_header {
			width: 100%;
			height: 50px;
			position: fixed;
			left: 0;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-bottom: 1px solid #f1f1f1;

			.search {
				font-size: 22px;
				color: #000;
				position: absolute;
				left: 4%;
			}

			.logo {
				width: 20%;
			}
		}

		.index_banner {
			width: 100%;
			height: 205px;
			margin-top: 50px;
		}

		.index_ensure {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 7px 15px;
			background-color: #fff;

			.ensure_item {
				display: flex;
				align-items: center;
				line-height: 20px;

				.text {
					font-size: 12px;
				}
			}
		}

		.index_nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px;
			background-color: #fff;

			.nav_item {
				width: 11%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.img {
					width: 100%;
				}

				.title {
					font-size: 14px;
					text-align: center;
					margin-top: 3px;
				}
			}
		}

		.index_imgNav {
			padding: 10px;
			margin-top: 10px;
			background-color: #fff;

			.title {
				font-size: 15px;
				font-weight: 600;
				color: #884e22;
				padding-left: 10px;
				border-left: 2.5px solid #884e22;
				line-height: 15px;
				margin-bottom: 10px;
			}

			.imgNav {
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.imgNav_item1 {
					width: 31%;
					position: relative;
					border-radius: 7px;
					overflow: hidden;

					.img {
						width: 100%;
					}

					.text {
						width: 100%;
						line-height: 30px;
						text-align: center;
						font-size: 14px;
						color: #fff;
						font-weight: 600;
						z-index: 1;
						position: absolute;
						bottom: 0;
						left: 0;
						background-color: rgb(126, 178, 84);
					}
				}

				.imgNav_item2 {
					width: 23.5%;
					background-color: #F3EBE3;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 10px 8px 5px;
					box-sizing: border-box;
					border-radius: 7px;
					overflow: hidden;

					.img {
						width: 100%;
					}

					.text {
						font-size: 14px;
						font-weight: 600;
						color: #884e22;
						text-align: center;
						margin-bottom: 7px;
					}
				}
			}
		}

		.index_module {
			padding: 15px;
			background-color: #fff;
			margin-top: 10px;

			.module_item {
				.title {
					font-size: 15px;
					font-weight: 600;
					margin-top: 14px;
					text-align: center;
				}

				.line {
					width: 80px;
					height: 4px;
					background-color: #884e22;
					border-radius: 4px;
					margin: 6px auto;
				}

				.list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.list_item {
						width: calc((100% - 15px) / 2);
						margin-top: 15px;
						font-size: 14px;

						.img {
							width: 100%;
						}

						.name {
							padding: 7px 0;
							line-height: 20px;
							color: #666666;
						}

						.info {
							display: flex;
							justify-content: space-between;

							.price {
								color: #FF4433;
								font-weight: 600;
								font-size: 15px;
							}

							.sale {
								font-size: 12px;
								color: #999;
							}
						}
					}
				}

				.seeMore {
					width: 20%;
					line-height: 28px;
					border: 1px solid #999999;
					color: #999;
					font-size: 12px;
					text-align: center;
					margin: 20px auto 0;
					box-sizing: border-box;
				}
			}
		}

		.index_footer {
			background-color: #fff;
			margin-top: 10px;
			font-size: 12px;
			color: #999999;
			text-align: center;
			display: flex;
			flex-direction: column;
			padding: 25px 15px 15px;
		}
	}
</style>